<script lang="ts" setup>
const { title, content } = defineProps({
  title: {
    type: String,
    default: '',
    required: true
  },
  content: {
    type: String,
    default: '',
    required: true
  }
})
</script>

<template>
  <el-container class="box-filter-shadow relative">
    <el-main
      class="note-box size-full use-second-bg use-transitions-colors absolute left-5 top-6"
    />
    <el-main class="note-box size-full use-third-bg use-transitions-colors absolute left-8 top-3" />
    <el-container class="pl-12 pr-9 pt-8 pb-5 z-10" direction="vertical">
      <span class="flex text-lg pb-2 border-b-2 border-amber-500"> {{ title }} </span>
      <el-container direction="vertical">
        <span class="diary leading-8 pt-2 text-justify">
          {{ content }}
        </span>
        <span class="flex pt-5 pb-8 justify-end text-lg">—— yshujia</span>
      </el-container>
    </el-container>
  </el-container>
</template>

<style lang="scss" scoped>
.diary {
  &:before {
    content: '隐藏';
    visibility: hidden;
  }
}

.note-box {
  max-width: calc(100% - 52px);
  max-height: calc(100% - 40px);
}
</style>
